<template>
	<view class="container">
		<!-- 输入户号缴费的布局 -->
		<view class="c_account">
			<image style="width: 40rpx; height: 54rpx; margin-left: 30rpx" src="/static/assets/water_28.png"></image>
			<input style="font-size: 32rpx; flex-grow: 1; margin-left: 30rpx" placeholder="请输入水表号" maxlength="20" type="number" @input="onInput" />
			<view class="to_charge_btn" @tap="onQuery">查 询</view>
		</view>

		<!-- 水表所在房间信息 -->
		<view v-if="item && item.water" class="item">
			<!-- 水费图标 水费 -->
			<view style="display: flex; flex-direction: row; align-items: center">
				<image style="width: 40rpx; height: 54rpx" src="/static/assets/water_26.png" mode="aspectFill" :data-index="index"></image>
				<view style="font-size: 32rpx; margin-left: 20rpx; flex-grow: 1">水费</view>
				<view style="color: #999; font-size: 28rpx">户主：{{ item.owner_name }}</view>
			</view>
			<!-- 户号 余额 -->
			<view style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 24rpx">
				<view style="color: #999; font-size: 28rpx">户号：{{ item.water }}</view>
				<view style="color: #00be6e; font-size: 28rpx">余额：{{ item.money }}元</view>
			</view>
			<!-- 房屋 -->
			<view style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 24rpx">
				<view style="color: #999; font-size: 28rpx">房屋：{{ item.name }}</view>
				<!-- <view class="to_charge_btn" style="margin-right: 0rpx;">去缴费</view> -->
			</view>
		</view>

		<view id="cydb_div">
			<view id="btn_add_cydb" @tap="onOk">绑定</view>
		</view>
	</view>
</template>

<script>
	const app = getApp(); // 获取应用实例
	import { getWBalance, postBindWater } from '../../../utils/http/api';
	export default {
		data() {
			return {
				// 输入的的缴费户号
				account_num: '',
				// 查询的户号对象
				item: {}
			}
		}, // 生命周期函数--监听页面加载
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {

			});
		},
		// 生命周期函数--监听页面初次渲染完成
		onReady() {},
		methods: {
			// 监听缴费户号输入框
			onInput(e) {
				// 监听输入的缴费户号，赋值给记录变量
				this.setData({ account_num: e.detail.value })
			},

			// 查询房间
			onQuery() {
				if (!this.account_num) {
					uni.showToast({ title: '请输入水表号', icon: 'none' })
					return
				}
				this.reqBalance()
			},

			// 确定
			onOk() {
				if (!this.item || !this.item.water) {
					uni.showModal({
						title: '提示',
						content: '请先点击『查询按钮』，确认户号、户主、房屋等信息后再进行操作。',
						showCancel: false
					})
					return
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认绑定该水表？',
					success(res) {
						if (res.confirm) {
							that.reqAddCydb()
						}
					}
				});
			},

			// 接口:查询水表号信息
			async reqBalance() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getWBalance({ water: this.account_num, token: app.globalData.gl.token })
				if (code == '1') {
					this.setData({ item: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			},

			// 接口:添加/绑定常用水表
			async reqAddCydb() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await postBindWater({ water: this.item.water, token: app.globalData.gl.token })
				if (code == '1') {
					uni.showModal({
						title: '提示',
						content: msg,
						showCancel: false,
						success: (res) => {
							uni.navigateBack()
						}
					})
					const eventChannel = this.getOpenerEventChannel()
					eventChannel.emit('onBindOk', 'onBindOk')
				} else {
					uni.showModal({ title: '提示', content: msg, showCancel: false })
				}
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.c_account {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0 20rpx 0 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
	}

	.to_charge_btn {
		background-color: #ffb365;
		border-radius: 100rpx;
		color: white;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 22rpx;
		padding-right: 22rpx;
		margin-right: 20rpx;
		font-size: 30rpx;
	}

	/* 水表item */
	.item {
		display: flex;
		flex-direction: column;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx;
	}

	/* 常用水表模块样式 */
	#cydb_div {
		display: flex;
		justify-content: center;
		margin: 20rpx 20rpx 0 20rpx;
	}

	#btn_add_cydb {
		border: solid 1px #ffb365;
		border-radius: 400rpx;
		font-size: 28rpx;
		color: #ffb365;
		padding: 10rpx 80rpx 10rpx 80rpx;
	}
</style>